<template>
	<!-- 组合组件 -->
	<view class="page_count" :data-theme="theme">
		<!--logo-->
		<view class="bg-img" :style="{'background-image': bgColor}">
			<img :src="bgColor" alt="">
		</view>
		<!-- 购买信息通知 -->
		<view class="purchase-swiper-box" :style="{top: myMainHeight + 10 + 'px'}">
			<swiper :indicator-dots="indicatorDots" :autoplay="true" :interval="2500" :duration="duration"
				vertical="true" circular="true" class="purchase-swiper">
				<block v-for="(item,index) in purchaseList" :key='index'>
					<swiper-item>
						<view class="purchase-info">
							<!-- <view class="fake-header"></view> -->
							<image class="fake-header" :src="item.avatar" mode=""></image>
							<view class="fake-name">{{item.nickname}}</view>
							<view class="fake-info">{{item.productName}}</view>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!-- 平台公告 -->
		<view class="notice-swiper-box" :style="{top: myMainHeight + 10  + 'px'}">
			<swiper :indicator-dots="indicatorDots" :autoplay="true" :interval="3500" :duration="duration"
				vertical="true" circular="true" class="notice-swiper">
				<block v-for="(notice,index2) in noticeList" :key='notice.id'>
					<swiper-item>
						<view class="roll-notice">
							<image :src="img_url + '/crmebimage/mer_plat_admin/index-notice.webp'" alt="" mode="">
							</image>
							<view class="fake-info">{{notice.title}}</view>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!--头部-->
		<view :class="{scrolled:isScrolled, 'my-main': true}" :style="{ height: myMainHeight+'px' }">

			<view class="activy-tab-box"
				:class="{'activy-tab-box-show': isShowTimelimited, 'activy-content-two': isChanged}">
				<view class="title-top">
					<view class="titleleft" v-if="firstTimeActivy">
						<view class="pictrue ">
							<image :src="src" class="image"></image>
						</view>
						<!-- <view class="point " :style="titleColor">{{ dataConfig.titleConfig.val }}</view> -->
						<view class="count-down-style">
							<tn-count-down ref="countDown" :timestamp="endSeconds" :autoplay="true"
								:backgroundColor="'linear-gradient( 143deg, #FE0000 0%, #FE6715 100%)'"
								:fontColor="'#fff'" :fontSize="24" :height="34" :separatorSize="24"
								:separatorColor="'#FE0000'"></tn-count-down>
						</view>
					</view>
					<view class="more" v-if="firstTimeActivy">更多<u-icon name="arrow-right" color="#808080"
							size="12"></u-icon>
					</view>
				</view>
				<view class="tabs-box">
					<tn-tabs class="" v-if="gridTitleList.length" :list="gridTitleList" :current="nameCurrent"
						activeColor="#FE0000" inactiveColor="#1A1A1A" :barWidth="20" :barHeight="10"
						@change="changeNameIndex" :height="86"
						:barStyle="{'background': `url(/static/smaill-icon.webp)`,'background-size': '20rpx 10rpx', 'bottom': '8rpx'}"
						:inactiveItemStyle="{'font-size': '28rpx !important'}"
						:activeItemStyle="{'font-weight': '800'}"></tn-tabs>
				</view>

			</view>
			<!--搜索-->
			<!-- #ifdef H5 -->
			<view class="header">
				<view class="serch-wrapper tn-flex">
					<view v-if="logoConfig" class="logo">
						<image :src="logoUrl" mode="scaleToFill" v-show="!isScrolled"></image>
						<image :src="img_url + '/crmebimage/mer_plat_admin/netstarlogo-sticky.webp'" mode="scaleToFill"
							v-show="isScrolled"></image>
					</view>
					<navigator v-if=" hotWords.length> 0" :url="'/pages/goods/goods_search/index?searchVal='+searchVal"
						:style="[searchBoxStyle,searchBorderColor]" :class="logoConfig ? 'input' : 'uninput'"
						hover-class="none" class="input">
						<text class="iconfont icon-sousuo8 tn-icon-search"
							:style="[searchBoxStyle, {'background-color': 'transparent !important'}]"></text>
						<view class='swiperTxt'>
							<swiper :indicator-dots="indicatorDots" :autoplay="true" :interval="interval"
								:duration="duration" vertical="true" circular="true" @change="textChange">
								<block v-for="(item,index) in hotWords" :key='index'>
									<swiper-item catchtouchmove='catchTouchMove'>
										<view class='search-input'>
											<view class='text'>
												<view class='newsTitle line1'>{{item.val}}</view>
											</view>
										</view>
									</swiper-item>
								</block>
							</swiper>
							<view class="search-btn" :style="searchBtnStyle">搜索</view>
						</view>
					</navigator>
					<navigator v-else :style="[searchBoxStyle]" :class="logoConfig ? 'input' : 'uninput'"
						url="/pages/goods/goods_search/index" class="input" hover-class="none">
						<text class="iconfont icon-sousuo8 tn-icon-search"
							:style="[searchBoxStyle, {'background-color': 'transparent !important'}]"></text>
						<text class="line1">{{placeWords}}</text>
					</navigator>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP || APP-PLUS-->
			<view class="mp-header">
				<view class="sys-head" :style="{ height: statusBarHeight+'px' }"></view>
				<view class="serch-box" style="margin-right: 4rpx;">
					<view class="serch-wrapper tn-flex">
						<view v-if="logoConfig" class="">
							<image :src="logoUrl" mode="scaleToFill" v-show="!isScrolled"></image>
							<image :src="img_url + '/crmebimage/mer_plat_admin/netstarlogo-sticky.webp'"
								mode="scaleToFill" v-show="isScrolled"></image>
						</view>
						<navigator v-if="hotWords.length > 0"
							:url="'/pages/goods/goods_search/index?searchVal='+searchVal"
							:style="[searchBoxStyle,searchBorderColor]" hover-class="none" class="input"
							:class="logoConfig ? 'input' : 'uninput'">
							<text class="iconfont icon-sousuo8 tn-icon-search"
								:style="[searchBoxStyle, {'background-color': 'transparent !important'}]"></text>
							<view class='swiperTxt'>
								<swiper :indicator-dots="indicatorDots" :autoplay="true" :interval="interval"
									:duration="duration" vertical="true" circular="true" @change="textChange">
									<block v-for="(item,index) in hotWords" :key='index'>
										<swiper-item catchtouchmove='catchTouchMove'>
											<view class='tn-flex row-between-wrapper search-input'>
												<view class='text'>
													<view class='newsTitle line1'>{{item.val}}</view>
												</view>
											</view>
										</swiper-item>
									</block>
								</swiper>
								<view class="search-btn" :style="[searchBtnStyle]">搜索</view>
							</view>
						</navigator>
						<navigator v-else :style="[searchBoxStyle,searchBorderColor]"
							:class="logoConfig ? 'input' : 'uninput'" url="/pages/goods/goods_search/index"
							class="input" hover-class="none">
							<text class="iconfont icon-sousuo8 tn-icon-search"
								:style="[searchBoxStyle, {'background-color': 'transparent !important'}]"></text>
							<text class="line1">{{placeWords}}</text>
						</navigator>
					</view>
				</view>
			</view>
			<!-- #endif -->
			<!-- <view class="navTabBox tabNav tui-skeletonpictrue tn-flex" :style="'top:'+isTop">
				<view class="longTab">
					<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;" scroll-with-animation
						:scroll-left="tabLeft" show-scrollbar="true">
						<view class="longItem" :data-index="index" v-for="(item,index) in tabList" :key="index"
							:id="'id'+index" @click="longClick(index,item)"
							:style="{ color: tabClick === index ? dataConfig.checkColor.color[0].item : textColor }">
							<view class="tn-flex row-middle">
								<view class="name tui-skeleton-rect">{{item.title}}</view>
								<view class="underlineBox" v-if="index===tabClick">
									<view class="underline" :style="[lineColor]"></view>
								</view>
							</view>
						</view>

					</scroll-view>
				</view>
				<view class="category">
					<text v-if="isShow" class="iconfont icon-xiangshang" @click="isShow=false"></text>
					<text v-if="!isShow" class="iconfont icon-xiangxia" @click="isShow=true"></text>
				</view>
			</view> -->
			<!-- <view v-if="isShow" class="navChangeBox" catchtouchmove="true" :style="'top:'+isTop">
				<view class="navChange">
					<block v-for="(item,index) in tabList" :key="index">
						<view class="titleBox" :class="index===tabClick?'changed':''"><text class="title line1"
								:id="'id'+index" @click="longClick(index,item)">{{item.title}}</text></view>
					</block>
				</view>
				<view class="mask" @touchmove.prevent :hidden="!isShow" @click="isShow=false"></view>
			</view> -->
		</view>

		<!-- banner -->
		<!-- <view class="swiperBg" :style="{ marginTop: swiperTop+'px'}"> -->
		<view class="swiperBg">
			<view class="swiper page_swiper">
				<swiper :autoplay="true" :circular="circular" :interval="intervalBanner" :duration="duration"
					previous-margin="0" next-margin="0" :current="swiperCur" @change="swiperChange">
					<block v-for="(item,index) in banner" :key="index">
						<swiper-item :style="[contentStyleBanner]" :class="{ active: index == swiperCur }"
							class="scalex">
							<view @click="menusTap(item.info[1].value)"
								class='slide-navigator tn-flex row-between-wrapper'>
								<image :style="[contentStyleBanner]" :src="item.img" class="slide-image aa"
									mode="aspectFill"></image>
							</view>
						</swiper-item>
					</block>
				</swiper>
				<view v-if="docType === 0" class="dots" :style="[dotStyle]">
					<block v-for="(item,index) in banner" :key="index">
						<view class="dot-item"
							:style="{'background-color': swiperCur === index ? dataConfig.docColor.color[0].item : ''}">
						</view>
					</block>
				</view>
				<view v-if="docType === 1" class="dots" :style="[dotStyle]">
					<block v-for="(item,index) in banner" :key="index">
						<view class="dot" :class="{'dot-active': swiperCur === index}"
							:style="{'background-color':   dataConfig.docColor.color[0].item}">
						</view>
					</block>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import store from '../store';
	let app = getApp();
	export default {
		name: 'homeComb',
		props: {
			dataConfig: {
				type: Object,
				default: () => {}
			},
			//是否开始滚动
			isScrolled: {
				type: Boolean,
				default: false
			},
			// 是否显示限时活动吸顶
			isShowTimelimited: {
				type: Boolean,
				default: false
			},
			// 是否切换吸顶菜单
			isChanged: {
				type: Boolean,
				default: false
			},
			noticeList: {
				type: Array,
				default: []
			},
			// 购买信息列表
			purchaseList: {
				type: Array,
				default: []
			},
			// 商品宫格标题列表
			gridTitleList: {
				type: Array,
				default: []
			},
			// 首个限时组件信息
			firstTimeActivy: {
				type: [Object, Boolean],
				default: false
			}
		},
		data() {
			return {
				myMainHeight: 0, //头部tab切换页和搜索按钮的高度和
				indicatorDots: false,
				circular: true,
				autoplay: false,
				duration: 500,
				searchH: 0,
				swiperTop: 0,
				statusBarHeight: app.globalData.statusBarHeight, //手机端头部显示时间位置的高度
				swiperCur: 0,
				showSkeleton: true,
				tabClick: 0, //导航栏被点击
				isLeft: 0, //导航栏下划线位置
				isWidth: 0, //每个导航栏占位
				mainWidth: app.globalData.mainWidth,
				theme: app.globalData.theme,
				tabLeft: 0,
				bgColor: '',
				isTop: 0,
				navHeight: 0,
				isShow: false,
				marTop: 0,
				searchVal: '',
				intervalBanner: 2500,
				img_url: '',
				activyNameList: [{
					name: '今日特卖'
				}, {
					name: '口碑'
				}, {
					name: '收纳架/盒'
				}, {
					name: '宠物用品'
				}, {
					name: '粘钩'
				}, {
					name: '大牌美妆'
				}, {
					name: '食品生鲜'
				}],
				nameCurrent: 0,
				src: store.state.imgUrl +
					'/crmebimage/mer_plat_admin/xianshihuodong-titile.png',
			};
		},
		watch: {
			banner: {
				handler(val) {
					this.bgColor = val[0].img;
				},
				immediate: true
			},
		},
		computed: {
			endSeconds() {
				return store.state.combEndSeconds || 0
			},
			//搜索提示语
			placeWords() {
				return this.dataConfig.placeWords.val;
			},
			//轮播切换时间
			interval() {
				return this.dataConfig.titleConfig.val * 1000
			},
			//指示器类型，0圆，1直，2无
			docType() {
				return this.dataConfig.docConfig.tabVal
			},
			//搜索热词列表
			hotWords() {
				return this.dataConfig.hotWords.list
			},
			//分类选中颜色
			lineColor() {
				return {
					backgroundColor: this.dataConfig.checkColor.color[0].item
				}
			},
			//判断logo图是否展示
			logoConfig() {
				return this.dataConfig.logoConfig.url && this.dataConfig.searConfig.tabVal === 1
			},
			//logo图
			logoUrl() {
				return this.dataConfig.logoConfig.url
			},
			//标签文字颜色
			textColor() {
				return this.dataConfig.fontColor.color[0].item;
			},
			//分类列表
			tabList() {
				//type=0微页面，1分类，2首页
				let tabList = this.dataConfig.listConfig.list;
				tabList.unshift({
					title: '首页',
					type: 2,
					val: 0
				})
				return tabList
			},
			//轮播列表
			banner() {
				console.log(this.dataConfig);
				return this.dataConfig.swiperConfig.list
			},
			//搜索框样式
			searchBoxStyle() {
				return {
					borderRadius: this.dataConfig.contentStyle.val ? this.dataConfig.contentStyle.val + 'px' : '0',
					backgroundColor: this.dataConfig.borderColor.color[0].item,
					color: this.dataConfig.textColor.color[0].item,
					textAlign: this.dataConfig.textPosition.list[this.dataConfig.textPosition.tabVal].style
				}
			},
			//搜索框边框
			searchBorderColor() {
				return {
					borderColor: this.dataConfig.searchBorderColor.color[0].item
				}
			},
			// 搜索按钮样式
			searchBtnStyle() {
				return {
					color: this.dataConfig.searchBtnColor.color[0].item,
					backgroundColor: this.dataConfig.searchBtnBg.color[0].item
				}
			},
			//指示器样式
			dotStyle() {
				return {
					padding: '0 44rpx',
					justifyContent: this.dataConfig.txtStyle.tabVal === 1 ? 'center' : this.dataConfig.txtStyle
						.tabVal === 2 ? 'flex-end' : 'flex-start'
				}
			},
			//轮播图圆角
			contentStyleBanner() {
				return {
					'borderRadius': this.dataConfig.contentStyleBanner.val ? this.dataConfig.contentStyleBanner
						.val + 'px' : '0'
				}
			},
		},
		created() {
			this.img_url = this.$store.state.imgUrl
			// #ifdef MP || APP-PLUS
			this.isTop = (this.statusBarHeight + 48) + 'px' //分类的top值
			// #endif
			// #ifdef H5
			this.isTop = 0
			// #endif
			this.isWidth = (this.mainWidth - 65) / 4;
			setTimeout((e) => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.header').boundingClientRect(res => {
					if (res) this.marTop = res.height //头部的高度
					// #ifdef H5
					this.swiperTop = this.marTop + this.statusBarHeight + 4; //轮播图的top值
					this.myMainHeight = this.marTop //头部tab切换页和搜索按钮的高度和
					//#endif
					// #ifndef H5
					this.swiperTop = this.statusBarHeight + 85; //轮播图的top值
					this.myMainHeight = this.statusBarHeight + 47; //头部tab切换页和搜索按钮的高度和
					//#endif
				}).exec();
				// query.select('.navTabBox').boundingClientRect(data => {
				// 	this.navHeight = data.height //元素navHeight的高度
				// 	// #ifdef H5
				// 	this.swiperTop = this.navHeight + this.marTop + this.statusBarHeight + 4; //轮播图的top值
				// 	this.myMainHeight = this.marTop + 35 //头部tab切换页和搜索按钮的高度和
				// 	//#endif
				// 	// #ifndef H5
				// 	this.swiperTop = this.statusBarHeight + 85; //轮播图的top值
				// 	this.myMainHeight = this.statusBarHeight + 40 + 42; //头部tab切换页和搜索按钮的高度和
				// 	//#endif
				// }).exec();
			}, 200)
		},
		methods: {
			changeNameIndex(index) {
				this.nameCurrent = index;
				store.commit('CHANGE_SWITCH_STATE', true)
				this.$emit('ScrollPosition', this.gridTitleList[index].id)
			},
			//轮播图跳转
			menusTap(url) {
				this.$util.navigateTo(url);
			},
			swiperChange(e) {
				let {
					current,
					source
				} = e.detail;
				if (source === 'autoplay' || source === 'touch') {
					this.swiperCur = e.detail.current;
					this.bgColor = this.banner[e.detail.current]['img']
				}
			},
			textChange(e) {
				let {
					current,
					source
				} = e.detail;
				if (source === 'autoplay' || source === 'touch') {
					this.searchVal = this.hotWords[e.detail.current]['val']
				}
			},
			// 导航栏点击
			// longClick(index, item) {
			// 	this.tabClick = index; //设置导航点击了哪一个
			// 	this.$nextTick(() => {
			// 		let id = 'id' + index;
			// 		this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
			// 		this.$emit('changeTab', index, item);
			// 	})
			// },
			// parentEmit(id, index) {
			// 	this.$emit('changeTab', id, index); 
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.uninput {
		/* #ifdef MP */
		width: 510rpx !important;
		/* #endif */
		/* #ifndef MP */
		width: 100% !important;
		/* #endif */
	}

	.icon-sousuo8 {
		font-size: 30rpx;
		position: absolute;
		left: 14rpx;
		top: 50%;
		transform: translateY(-49%);
		/* #ifndef H5 */
		// top: 13rpx;
		/* #endif */
		/* #ifdef H5 */
		// top: 14rpx;
		/* #endif */

	}

	.bgwhite {
		background-color: #fff !important;
	}

	.mask {
		z-index: 999;
		top: 260rpx;
	}

	.navChangeBox {
		position: relative;
	}

	.navChange {
		background-color: #fff;
		position: absolute;
		z-index: 999999;
		width: 100%;
		border-radius: 0rpx 0rpx 16rpx 16rpx;
		padding: 24rpx 20rpx;
		display: grid;
		grid-template-rows: auto;
		grid-template-columns: repeat(5, 1fr);
		grid-column-gap: 10rpx;
		grid-row-gap: 20rpx;

		.nobg {
			background-color: #fff !important;
		}

		.titleBox {
			height: 58rpx;
			background: #F2F2F2;
			border-radius: 8rpx;
			text-align: center;
		}

		.title {
			margin: 0 auto;
			display: inline-block;
			width: 118rpx;
			height: 58rpx;
			line-height: 58rpx;
			text-align: center;

			opacity: 1;
			color: #333333;
			font-size: 24rpx;
		}

		.titleBox:nth-child(5n) {
			margin-right: 0;
		}

		.titleBox:last-child {
			margin-bottom: 0;
		}

		// .changed {
		// 	border-radius: 8rpx;
		// 	@include cate-two-btn(theme);
		// 	@include coupons_border_color(theme);

		// 	.title {
		// 		@include main_color(theme);
		// 	}
		// }
	}

	.row-middle {
		flex-direction: column;
	}

	.navTabBox {
		width: 100%;
		height: 66rpx;
		color: rgba(255, 255, 255, 1);
		position: relative;
		padding: 0 24rpx 0 24rpx;
		display: flex;
		justify-content: space-between;
		z-index: 9;

		&.isFixed {
			z-index: 10;
			position: fixed;
			left: 0;
			width: 100%;
			/* #ifdef H5 */
			top: 0;
			/* #endif */
		}

		.click {
			color: white;
		}

		.longTab {
			width: 94%;

			.longItem {
				//height: 72rpx;
				display: inline-block;
				// line-height: 52rpx;
				text-align: center;
				font-size: 28rpx;
				color: #fff;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-right: 42rpx;

				&.click {
					font-weight: bold;
					font-size: 30rpx;
					color: #fff;
					font-weight: bold;
				}

				.name {
					height: 48rpx;
				}
			}

			.underlineBox {
				margin-top: 8rpx;
				height: 6rpx;
				transition: .5s;

				.underline {
					width: 33rpx;
					height: 4rpx;
				}
			}
		}

		.category {
			height: 66rpx;
			line-height: 46rpx;
			z-index: 3;

			// padding: 0 15rpx 0 25rpx;
			.iconfont {
				font-size: 24rpx;
			}
		}
	}


	.swiperBg {
		z-index: 1;
		// margin-top: 10rpx;

		.colorBg {
			position: absolute;
			left: 0;
			top: 0;
			height: 130rpx;
			width: 100%;
		}

		.page_swiper {
			position: relative;
			width: 100%;
			height: auto;
			margin: 0 auto;
			// border-radius: 10rpx;
			overflow: hidden;
			z-index: 8;
			// padding: 0 0rpx 20rpx 0rpx;

			.swiper-item,
			image,
			.tn-flex.row-between-wrapper {
				width: 100%;
				// height: 310rpx;
				height: 688rpx;
				margin: 0 auto;
				// border-radius: 10rpx;
			}

			swiper {
				width: 100%;
				display: block;
				// height: 310rpx;
				height: 688rpx;

				&.scalex {
					/deep/.uni-swiper-slide-frame {
						transform: translate(0, 0) !important;
					}
				}
			}

			image {
				// transform: scale(0.96);
				transition: all 0.6s ease;
			}

			// /deep/ swiper-item.active {
			// 	image {
			// 		transform: scale(1);
			// 	}
			// }

			/*用来包裹所有的小圆点  */
			.dots {
				display: flex;
				flex-direction: row;
				position: absolute;
				bottom: 40rpx;
				align-items: center;
				width: 100%;
			}

			.dot-item {
				width: 10rpx;
				height: 10rpx;
				background-color: rgba(255, 255, 255, .4);
				border-radius: 8rpx;
				margin: 0 6rpx;
			}

			/*未选中时的小圆点样式 */
			.dot {
				width: 10rpx;
				height: 10rpx;
				border-radius: 8rpx;
				margin-right: 8rpx;
				background-color: rgba(255, 255, 255, .4);
				transition: all .1s;
			}

			.dot-active {
				width: 80rpx;
			}
		}
	}

	.scrolled {
		z-index: 5000;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		background-color: #fff !important;
		color: #000 !important;
		transition: background-color .5s ease;
		/* #ifndef MP || APP-PLUS */
		height: 112rpx !important;

		.header {
			// padding: 18rpx 24rpx !important;

			.icon-sousuo8 {
				color: #808080 !important;
			}
		}

		/* #endif */

		.longItem,
		.click,
		.category text {
			color: #000 !important;
		}

		.btn .iconfont {
			color: #808080 !important;
		}

		.iconnum {
			background: #333 !important;
		}

		.underline {
			background: #000 !important;
		}

		.click {
			&::after {
				background-color: #fff !important;
			}
		}

		.input,
		.uninput {
			height: 70rpx !important;
			color: #808080 !important;
			background-color: #f2f2f2 !important;
			border-color: #fff !important;

			.swiperTxt {
				line-height: 70rpx !important;
			}
		}
	}

	.page_count {
		position: relative;
		overflow: hidden;
		background-repeat: no-repeat;

		.purchase-swiper-box {
			position: absolute;
			top: 40rpx;
			left: 20rpx;
			width: 232rpx;
			height: 44rpx;
			overflow: hidden;
			z-index: 10;

			.purchase-swiper {
				height: 54rpx;
			}
		}

		.notice-swiper-box {
			position: absolute;
			top: 40rpx;
			right: 20rpx;
			width: 300rpx;
			height: 44rpx;
			overflow: hidden;
			z-index: 10;

			.notice-swiper {
				height: 54rpx;
			}
		}

		.purchase-info {
			width: 232rpx;
			height: 44rpx;
			background: rgba(255, 255, 255, 0.5);
			border-radius: 22rpx;
			display: flex;
			align-items: center;
			// justify-content: space-between;
			padding: 0 16rpx;

			.fake-header {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.7);
				margin-right: 8rpx;
			}

			.fake-name {
				font-size: 20rpx;
				color: rgba(0, 0, 0, 0.8);
				margin-right: 8rpx;
				flex-shrink: 0;
			}

			.fake-info {
				width: 124rpx;
				font-size: 20rpx;
				color: rgba(0, 0, 0, 0.5);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.roll-notice {
			width: 300rpx;
			height: 44rpx;
			background: rgba(255, 255, 255, 0.5);
			border-radius: 22rpx;
			z-index: 10;
			display: flex;
			align-items: center;
			align-content: center;
			padding: 0 16rpx;
			color: rgba(0, 0, 0, 0.5);
			font-size: 24rpx;
			line-height: 44rpx;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 16rpx;
			}

			view {
				width: 240rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.bg-img {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			/* #ifdef MP || APP-PLUS */
			z-index: -1;
			/* #endif */
			/* #ifdef H5 */
			z-index: 0;
			/* #endif */
			z-index: 0;
			filter: blur(0);
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
				filter: blur(30rpx);
				transform: scale(1.5);
			}
		}
	}

	.my-main {
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 30;
		transition: all .5s ease;
	}

	.activy-tab-box {
		position: absolute;
		bottom: -86rpx;
		left: 0;
		width: 100%;
		height: 86rpx;
		background-color: #fff;
		transition: all .5s ease;
		opacity: 0;
		overflow: hidden;


		.title-top {
			height: 86rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			padding: 0 30rpx;
			transition: all .5s;

			.titleleft {
				display: flex;
				align-items: center;

				.count-down-style {
					margin-left: 14px;
				}
			}

			.pictrue {
				width: 170rpx;
				height: 38rpx;
				margin-right: 0px;

				image,
				.image,
				::v-deep.el-image {
					width: 100%;
					height: 100%;
				}
			}

			.lines {
				width: 2rpx;
				height: 24rpx;
				background-color: #fff;
				opacity: 0.6;
				margin-left: 16rpx;
			}

			.point {
				font-size: 24rpx;
				color: #fff;
				margin-left: 14rpx;
				margin-right: 4rpx;
				z-index: 9;
			}

			.styleAll {
				width: 34rpx;
				height: 34rpx;
				background-color: #2f2f2f;
				border-radius: 6rpx;
				color: #fff;
				text-align: center;
			}

			.more {
				opacity: 1;
				font-size: 24rpx;
				color: #808080;
				display: flex;

				.iconfont {
					font-size: 24rpx;
				}
			}
		}

		.tabs-box {
			transition: all .5s;
		}
	}

	.activy-tab-box-show {
		opacity: 1;
	}

	.activy-content-two {
		opacity: 1;

		.title-top {
			transform: translateY(-100%);
		}

		.tabs-box {
			transform: translateY(-100%);
		}
	}

	.page_count {

		.header {
			width: 100%;
			padding: 24rpx;
			position: relative;


			.serch-wrapper {
				align-items: center;

				.logo {
					width: 118rpx;
					margin-right: 24rpx;
				}

				image {
					// width: 118rpx;
					// height: 42rpx;
					width: 92rpx;
					height: 66rpx;
				}

				.input {
					display: flex;
					align-items: center;
					align-content: center;
					width: 546rpx;
					height: 70rpx;
					padding-left: 54rpx;
					font-size: 26rpx;
					position: relative;
					padding-right: 4rpx;
					box-sizing: border-box;
					border: 2rpx solid #fff;

					.iconfont {
						margin-right: 16rpx;
						font-size: 30rpx;
						color: #666666;
					}
				}
			}

			.tabNav {
				padding-top: 24rpx;
			}
		}

		/* #ifdef MP || APP-PLUS */
		.mp-header {
			position: relative;
			z-index: 999;
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			/* #ifdef H5 */
			padding-bottom: 20rpx;
			/* #endif */

			.serch-wrapper {
				height: 100%;
				align-items: center;
				padding: 0 24rpx 0 24rpx;

				image {
					// width: 118rpx;
					// height: 42rpx;
					width: 92rpx;
					height: 66rpx;
					margin-right: 30rpx;
				}

				.input {
					display: flex;
					align-items: center;
					position: relative;
					/* #ifdef MP */
					width: 400rpx;
					/* #endif */
					/* #ifndef MP */
					width: 546rpx;
					/* #endif */
					/* #ifdef APP-PLUS */
					flex: 1;
					/* #endif */
					height: 70rpx;
					padding-left: 50rpx;
					font-size: 28rpx;
					box-sizing: border-box;
					border: 2rpx solid #fff;

					.iconfont {
						margin-right: 20rpx;
					}
				}
			}
		}

		/* #endif */
		.swiperTxt {
			width: 100%;
			/* #ifndef MP */
			//width: 484rpx;
			/* #endif */
			/* #ifdef MP */
			//width: 333rpx;
			/* #endif */
			height: 100%;
			line-height: 70rpx;
			overflow: hidden;
			display: flex;
			align-items: center;
			padding: 0 10rpx;
		}

		.swiperTxt .text {
			/* #ifndef MP */
			width: 480rpx;
			/* #endif */
			/* #ifdef MP */
			width: 289rpx;
			/* #endif */
		}

		.swiperTxt .text .label {
			font-size: 20rpx;
			color: #ff4c48;
			width: 64rpx;
			height: 30rpx;
			border-radius: 40rpx;
			text-align: center;
			line-height: 28rpx;
			border: 2rpx solid #ff4947;
		}

		.swiperTxt .text .newsTitle {
			/* #ifndef MP */
			// width: 484rpx;
			// /* #endif */
			// /* #ifdef MP */
			// width: 446rpx;
			/* #endif */
			font-size: 24rpx;
		}

		.search-btn {
			width: 130rpx;
			height: 58rpx;
			background: #FE0000;
			border-radius: 30rpx;
			line-height: 58rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 600;
			color: #fff;
			justify-self: end;
		}

		.swiperTxt swiper {
			width: 100%;
			height: 100%;
		}


	}
</style>